<style>
  .layui-input-inline{margin-top:10px;}
</style>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>数据分析</cite></a>
    <a><cite>商户支付排行</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">商户支付排行</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row" style="margin-bottom: 10px;">
            <div class="layui-form" style="float:right;">
              <div id="timeDiv" class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="agentId" id="agentId" placeholder="代理商ID" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="mchId" id="mchId" placeholder="商户ID" autocomplete="off" class="layui-input">
                </div>
                <a id="search" style="margin-top: 10px" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
              </div>
            </div>
          </div>

          <table id="XxPay_Bcd_User_dataAll" lay-filter="XxPay_Bcd_User_dataAll"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script>
layui.use(['table', 'util', 'timePick'], function(){
  var $ = layui.$
  ,table = layui.table
  ,element = layui.element
  ,timePick = layui.timePick
  ,form = layui.form;

  timePick.initDate();  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
  element.render('breadcrumb', 'breadcrumb');

    var createTimeStart = $('#createTimeStart').val();
    var createTimeEnd = $('#createTimeEnd').val();
    var tplRate = function(d){
        var rate = "";
        if (d.payTotalCount == 0) {
            rate = "0.00";
        }else {
            rate = parseFloat((d.paySuccessCount/d.payTotalCount)*100).toFixed(2);
        }
        var d = rate + "%";
        if(parseFloat(rate) >= 50.00) {
            return "<span style='color: green'>" + d + "</span>";
        }else if(parseFloat(rate) < 50.00) {
            return "<span style='color: red'>" + d + "</span>";
        }
    };

  //用户统计列表
  table.render({
    elem: '#XxPay_Bcd_User_dataAll'
    ,cellMinWidth: 90
    ,url: layui.setter.baseUrl + '/data/count4MchTop'
    ,where: {
      access_token: layui.data(layui.setter.tableName).access_token,
      createTimeStart: createTimeStart,
      createTimeEnd: createTimeEnd
    }
    ,initSort: {
      field: 'payTotalAmount' //排序字段，对应 cols 设定的各字段名
      ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
    }
    ,id: 'tableReload'
    ,page: true
    ,limit: 50
    ,cols: [[
      {field: 'mchId', title: '商户ID'}
      ,{field: 'name', title: '商户名称'}
      ,{field: 'payTotalAmount', title: '支付金额', sort: true, templet: '<div>{{ d.paySuccessAmount/100 }}</div>'}
      ,{field: 'payTotalFee', title: '手续费', sort: true, templet: '<div>{{ d.payTotalFee/100 }}</div>'}
      ,{field: 'paySuccessAmount', title: '入账金额', sort: true, templet: '<div>{{ parseFloat((d.paySuccessAmount-d.payTotalFee)/100).toFixed(2) }}</div>'}
      ,{field: 'paySuccessCount', title: '笔数', sort: true, templet: '<div>{{ d.paySuccessCount+"/"+d.payTotalCount }}</div>'}
      ,{field: 'payTotalCount', title: '成功率', sort: true, templet: tplRate}
    ]]
    ,skin: 'line'
  });

  // 搜索
  var $ = layui.$, active = {
    reload: function(){
      var createTimeStart = $('#createTimeStart').val();
      var createTimeEnd = $('#createTimeEnd').val();
      var mchId = $('#mchId').val();
      var agentId = $('#agentId').val();
      //执行重载
      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,page: true
        ,where: {
          createTimeStart: createTimeStart,
          createTimeEnd: createTimeEnd,
          mchId: mchId,
          agentId: agentId,
        }
      });
    }
  };
  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  // 渲染表单
  form.render();
});
</script>